<template>
	<div style="position: absolute; width: 100%; height: 20px; overflow: hidden">
		<svg style="width: 100%; height: 100%">
			<g>
				<g>
					<polyline stroke="#1de2ff" points="525.2,16.8 532.5,9.3 804.7,9.3" class="st5" />
					<polyline stroke="#1de2ff" points="1394.6,16.6 1389.3,11.3 1117.1,11.3" class="st5" />
					<animate
						accumulate="none"
						additive="replace"
						attributeName="stroke-dasharray"
						attributeType="XML"
						begin="0s"
						calcMode="spline"
						dur="1.2s"
						fill="remove"
						from="0, 150, 0, 150"
						keySplines="0.4,1,0.49,0.98"
						keyTimes="0;1"
						repeatCount="indefinite"
						restart="always"
						to="0, 0, 2000, 0"
					/>
				</g>
				<g>
					<polygon fill="#1de2ff" points="788.2,3.6 754.3,3.6 746.8,11.1 780.8,11.1" />
					<animate
						accumulate="none"
						additive="replace"
						attributeName="opacity"
						begin="0s"
						calcMode="linear"
						dur="1.5s"
						fill="remove"
						repeatCount="indefinite"
						restart="always"
						values="0.8;0.6;0.2"
					/>
				</g>
				<g>
					<polygon fill="#1de2ff" points="815.6,1.4 789.1,1.4 779.4,11.1 805.9,11.1" />
					<animate
						accumulate="none"
						additive="replace"
						attributeName="opacity"
						begin="0s"
						calcMode="linear"
						dur="1.5s"
						fill="remove"
						repeatCount="indefinite"
						restart="always"
						values="1;0.8;0.4"
					/>
				</g>
				<g class="st7">
					<polygon fill="#1de2ff" points="860.4,5.2 828.5,5.2 816.9,16.8 848.8,16.8">
						<animate
							accumulate="none"
							additive="replace"
							attributeName="fill"
							begin="0s"
							calcMode="linear"
							dur="0.5s"
							fill="remove"
							repeatCount="indefinite"
							restart="always"
							values="rgba(29,226,255,0.3);#1de2ff;rgba(29,226,255,0.3)"
						/>
					</polygon>
				</g>
				<g>
					<polygon fill="#1de2ff" points="1053.9,-0.5 866.4,-0.5 854.8,11.1 1066.3,11.1">
						<animate
							accumulate="none"
							additive="replace"
							attributeName="fill"
							begin="0s"
							calcMode="linear"
							dur="0.5s"
							fill="remove"
							repeatCount="indefinite"
							restart="always"
							values="#1de2ff;rgba(29,226,255,0.3);#1de2ff"
						/>
					</polygon>
				</g>
				<g class="st0">
					<polygon fill="#1de2ff" points="803.1,16.8 1120.3,16.8 1126.3,10.8 796.7,10.8" />
				</g>
				<g class="st7">
					<polygon fill="#1de2ff" points="1059.8,5.2 1091.7,5.2 1103.3,16.8 1071.4,16.8">
						<animate
							accumulate="none"
							additive="replace"
							attributeName="fill"
							begin="0s"
							calcMode="linear"
							dur="0.5s"
							fill="remove"
							repeatCount="indefinite"
							restart="always"
							values="rgba(29,226,255,0.3);#1de2ff;rgba(29,226,255,0.3)"
						/>
					</polygon>
				</g>
				<g>
					<polygon fill="#1de2ff" points="1133.9,3.6 1167.9,3.6 1175.3,11.1 1141.4,11.1" />
					<animate
						accumulate="none"
						additive="replace"
						attributeName="opacity"
						begin="0s"
						calcMode="linear"
						dur="1.5s"
						fill="remove"
						repeatCount="indefinite"
						restart="always"
						values="0.8;0.6;0.2"
					/>
				</g>
				<g>
					<polygon fill="#1de2ff" points="1106.5,1.4 1133,1.4 1142.7,11.1 1116.2,11.1" />
					<animate
						accumulate="none"
						additive="replace"
						attributeName="opacity"
						begin="0s"
						calcMode="linear"
						dur="1.5s"
						fill="remove"
						repeatCount="indefinite"
						restart="always"
						values="1;0.8;0.4"
					/>
				</g>
			</g>
		</svg>
	</div>
</template>

<style lang="scss" scoped>
.st5 {
	fill: none;
	stroke-linecap: round;
	stroke-miterlimit: 10;
}
</style>
